<script setup lang="ts">
  import axios from 'axios'
  import { ref } from 'vue'

  const progress = ref(0) // 进度条百分比
  let controller: AbortController // 中止控制器

  // 中止下载
  const abortDownload = () => {
    if (controller) {
      controller.abort() // 使用 abort 方法中止下载
      console.log('中止下载')
    }
  }

  // 下载视频
  const fetchVideo = () => {
    controller = new AbortController() // 创建 AbortController
    axios({
      // 将中止控制器传递给 axios 的 get 方法
      method: 'GET',
      url: 'http://localhost:3007/video',
      signal: controller.signal,
      responseType: 'arraybuffer',
      onDownloadProgress: (progressEvent) => {
        // 计算进度百分比
        progress.value = Math.round(
          (progressEvent.loaded / progressEvent.total!) * 100
        )
      },
    })
      .then((response) => {
        console.log('下载完成', response)
        // ✅ 保存下载的文件
        // const { buffer } = new Uint8Array(response.data)
        // console.log(buffer);
        const buffer = response.data
        const blob = new Blob([buffer], { type: 'application/octet-stream' })

        const link = document.createElement('a') // 创建链接元素
        link.href = URL.createObjectURL(blob) // 将 Blob 对象转换为 URL
        link.download = 'video.mp4' // 设置文件名
        link.click() // 模拟点击链接元素

      })
      .catch((err) => {
        if (axios.isCancel(err)) {
          console.log('下载被取消')
        } else if (err.name === 'AbortError') {
          console.log('下载被中止')
        } else {
          console.error(`下载错误：${err.message}`)
        }
      })
  }
</script>

<template>
  <div>
    <button class="download" @click="fetchVideo">下载视频</button>
    <button class="abort" @click="abortDownload">中止下载</button>
    <div class="progress-bar">
      <div class="progress" :style="{ width: progress + '%' }"></div>
      {{ progress }}%
    </div>
  </div>
</template>

<style scoped>
  .progress-bar {
    width: 50%;
    height: 20px;
    background-color: #eee;
    margin-top: 10px;
  }
  .progress {
    width: 0%;
    height: 100%;
    background-color: #4caf50;
    transition: width 0.2s linear;
  }
</style>
